<ng-container *ngIf="selection"
              cdTableDetail>
  <ul ngbNav
      #nav="ngbNav"
      class="nav-tabs"
      cdStatefulTab="pool-details">
    <li ngbNavItem="details">
      <a ngbNavLink
         i18n>Details</a>
      <ng-template ngbNavContent>
        <cd-table-key-value [renderObjects]="true"
                            [data]="poolDetails"
                            [autoReload]="false">
        </cd-table-key-value>
      </ng-template>
    </li>
    <li ngbNavItem="performance-details"
        *ngIf="permissions.grafana.read">
      <a ngbNavLink
         i18n>Performance Details</a>
      <ng-template ngbNavContent>
        <cd-grafana i18n-title
                    title="Pool details"
                    grafanaPath="ceph-pool-detail?var-pool_name={{selection.pool_name}}"
                    [type]="'metrics'"
                    uid="-xyV8KCiz"
                    grafanaStyle="three">
        </cd-grafana>
      </ng-template>
    </li>
    <li ngbNavItem="configuration"
        *ngIf="selection.type === 'replicated'">
      <a ngbNavLink
         i18n>Configuration</a>
      <ng-template ngbNavContent>
        <cd-rbd-configuration-table [data]="selectedPoolConfiguration"></cd-rbd-configuration-table>
      </ng-template>
    </li>
    <li ngbNavItem="cache-tiers-details"
        *ngIf="selection['tiers']?.length > 0">
      <a ngbNavLink
         i18n>Cache Tiers Details</a>
      <ng-template ngbNavContent>
        <cd-table [data]="cacheTiers"
                  [columns]="cacheTierColumns"
                  [autoSave]="false"
                  columnMode="flex">
        </cd-table>
      </ng-template>
    </li>
  </ul>

  <div [ngbNavOutlet]="nav"></div>
</ng-container>
